<template>
	<view>
		<view class="submit">
			<!-- v-if="name==1" -->
			
			<view v-if="name==1"  style="display: flex;margin: auto;padding-left: 30rpx;background: linear-gradient(to right, #ffdf80, #dff0fc);">
			<view  style="font-size: 30rpx;font-weight: bold;padding-top: 5rpx;" >找到了志同道合的伙伴？快向他发起搭子关系！</view>
			<u-icon size="50rpx" name="thumb-up" @click="tobePartner"></u-icon>
			</view>
			<view class="submit-chat">
				<!--   -->
				<scroll-view style="width: 500rpx;" scroll-y="true">
				<textarea class="chat-sent btn" auto-height="true"  v-model="msg" v-show="!record.isrecord"  @focus="focus"></textarea>
				</scroll-view>
				<view class="record btn" v-show="record.isrecord" @touchstart="touchstart" @touchend="touchend" @touchmove="touchmove">按住说话</view>
				<view class="bt-img">
					<image src="../../static/smile.png" @tap="emoji()"></image>
				</view>
				<view class="bt-img" v-show="msg.length==0" @tap="more()">
					<image src="../../static/add.png"></image>
				</view>
				<view class="bt-send" v-show="msg.length>0" @tap="sendMsg(0)">
					<text>发送</text>
				</view>
			</view>
			<view class="emoji" v-show="isemoji">
				<view class="emoji-send">
					<u-icon class="emoji-delete" name="backspace" color="#787878" size="80" @tap="delMsg"></u-icon>
				</view>
				<emoji @getEmoji="getEmoji" :height="230"></emoji>
			</view>
			<view class="more" v-show="ismore">
				<view class="more-item" v-for="item in addSource">
					<image class="more-item-image" :src="item.imgurl" @tap="handleMoreItem(item.id)"></image>
					<view class="more-item-title">{{ item.title }}</view>
				</view>
			</view>
		</view>
		<view class="voice-bg" v-show="isvoicing">
			<view class="voice-bg-len">
				<view class="voice-bg-time" :style="{ width: vlength/0.6 + '%' }">{{ vlength }}"</view>
			</view>
			<view class="voice-bg-del" :style="{ color: cancelColor }">上滑取消录音</view>
		</view>
	</view>
</template>

<script>
	import { props } from 'node_modules/uview-ui/libs/mixin/mixin';
	import emoji from '../emoji/emoji.vue'
	import { imgUpload } from '../../common/api.js'
	
	const recorderManager = uni.getRecorderManager();
	
	const addSource = [
		{
			id: 0,
			imgurl: '../../static/poto.png',
			title: '图片'
		},
		{
			id: 1,
			imgurl: '../../static/camera.png',
			title: '相机'
		},
		// {
		// 	id: 2,
		// 	imgurl: '../../static/location.png',
		// 	title: '位置'
		// },
		// {
		// 	id: 3,
		// 	imgurl: '../../static/file.png',
		// 	title: '文件'
		// },
		// {
		// 	id: 4,
		// 	imgurl: '../../static/video.png',
		// 	title: '视频'
		// },
	]
	
	export default {
		name:"submit",
		components:{
			emoji
		},
		props:{
			name: String
		},
		data() {
			return {
				msg: '',
				record: {
					isrecord: false,
					toc: "../../static/voice.png"
				},
				isemoji: false,
				ismore: false,
				addSource,
				timer: '',	//计时器
				vlength: 0,	//音频时长
				isvoicing: false, //是否在录音
				touchstartPageY: 0,	//点击录音的Y轴位置
				cancelColor: '#fff',
			};
		},
		methods: {
			getEmoji(val){
				this.msg += val
				// console.log(val)
			},
			tobePartner() {
				this.$emit('tobePartner', " ")
			},
			getHeight(){
				const query = uni.createSelectorQuery().in(this)
				query.select('.submit').boundingClientRect(data=>{
					this.$emit('height', data.height)
				}).exec()
			},
			records(){
				this.isemoji = false
				this.ismore = false
				this.$nextTick(() => this.getHeight())
				if(this.record.isrecord){
					this.record.isrecord = false
					this.record.toc = "../../static/voice.png"
				}else {
					this.record.isrecord = true
					this.record.toc = "../../static/keyboard.png"
				}
			},
			emoji(){
				this.isemoji = !this.isemoji
				this.ismore = false
				this.record.isrecord = false
				this.record.toc = "../../static/voice.png"
				this.$nextTick(() => this.getHeight())
			},
			sendMsg(type=0, msg=''){ // 0文字，1图片链接，2音频文件, 3位置
				let data = {
					message: type==0? this.msg : msg,
					type: type
				}
				this.$emit("sendMsg", data)
				this.$nextTick(() => this.msg = '')
			},
			sendImg(sourceType){
				let count = 1
				if(sourceType=='camera') count=1
				uni.chooseImage({
					sourceType: [sourceType],// album是相册，camera是相机
					sizeType: ['original', 'compressed'],
					count: count, // 默认9
					success: (res) => {
					   const filePaths = res.tempFilePaths
					   for(let i=0; i < filePaths.length; i++){
							uni.uploadFile({
								url: this.$c.domain + 'oss/upload',
								filePath: filePaths[i],
								name: 'file',
								header: {
									token: uni.getStorageSync("token")
								},
								success: (res) => {
									let data = JSON.parse(res.data)
									console.log('@@@',data.url.url)
									this.sendMsg(1, data.url.url)
									uni.hideLoading();
								}
							});
					   }
					},
					fail: (err) => {
					   
					}
				})
			},
			handleMoreItem(id){
				if(id==0){
					this.sendImg('album')
				}else if(id==1){
					this.sendImg('camera')
				}else if(id==2){
					this.getLocation()
				}
			},
			inputs(e){
				let chatm = e.detail.value
				let pos = chatm.indexOf("\n")
				if(pos != -1 && chatm.length>1){
					this.sendMsg(0)
				}
			},
			delMsg(){
				if(this.msg.length>0){
					this.msg = this.msg.substring(0, this.msg.length-1)
				}
			},
			focus(){
				this.isemoji = false
				this.ismore = false
				this.$nextTick(()=>this.getHeight())
			},
			more(){
				this.ismore = !this.ismore
				this.isemoji = false
				this.record.isrecord = false
				this.record.toc = "../../static/voice.png"
				this.$nextTick(() => this.getHeight())
			},
			// 音频处理
			touchstart(e){	//开始录音
				this.cancelColor = '#fff'
				this.touchstartPageY = e.changedTouches[0].pageY
				this.isvoicing = true
				this.vlength = 1
				recorderManager.start();
				this.timer = setInterval(()=>{
					this.vlength++
					if(this.vlength>59)	this.touchend()
				}, 1000)
			},
			touchend(e){		//结束录音
				let touchendPageY = e.changedTouches[0].pageY
				this.isvoicing = false
				clearInterval(this.timer)
				recorderManager.stop();
				recorderManager.onStop((res)=> {
					if(this.cancelColor == '#dd524d') return
					let data = {
						voice: res.tempFilePath,
						time: this.vlength
					}
					this.sendMsg(2, data)
					this.$nextTick(() => this.getHeight())
				})
			},
			touchmove(e){	//取消录音
				if(this.touchstartPageY - e.changedTouches[0].pageY>60){
					this.cancelColor = '#dd524d'
				}else{
					this.cancelColor = '#fff'
				}
			},
			// 定位
			getLocation(){
				let data = {
					name: '天安门城楼售票处天安门城楼售票处天安门城楼售票处',
					address: '东长安街天安门城楼内东长安街天安门城楼内',
					latitude: '39.909473',
					longitude: '116.39730899999999',
				}
				this.sendMsg(3, data)
				// uni.chooseLocation({
				// 	success: function (res) {
				// 		let data = {
				// 			name: res.name,
				// 			address: res.address,
				// 			latitude: res.latitude,
				// 			longitude: res.longitude,
				// 		}
				// 		this.sendMsg(3, data)
				// 	}
				// })
			},
		}
	}
</script>

<style lang="scss">
	.submit{
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 12;
		background-color: rgba(244, 244, 244, 0.96);
		border-top: solid #c7c7c7 1px;
		padding-bottom: env(safe-area-inset-bottom);
	}
	.submit-chat{
		width: 100%;
		display: flex;
		align-items: flex-end;
		box-sizing: border-box;
		padding: 14rpx 14rpx;
		image{
			width: 56rpx;
			height: 56rpx;
			margin: 0 10rpx;
			flex: auto;
		}
		.chat-sent{
			line-height: 45rpx;
		}
		.btn{
			width: 400rpx;
			flex: auto;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 20rpx;
			max-height: 120rpx;
			margin: 0 10rpx;
			// box-sizing:content-box;
			adjust-position:false;
		}
		.record {
			text-align: center;
			color: gray;
		}
		.bt-send{
			width: 140rpx;
			color: #fff;
			font-size: 30rpx;
			text-align: center;
			background: #007aff;
			border: solid #007aff 2rpx;
			border-radius: 14rpx;
			padding: 15rpx 10rpx;
			margin: 0 10rpx;
		}
	}
	.emoji{
		width: 100%;
		height: 460rpx;
		background-color: #dbdbdb;
		box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1);
	}
	.emoji-send{
		margin: 40rpx 20rpx;
		padding: 0 12rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		right: 0;
		border-radius: 25rpx;
	}
	.more{
		width: 100%;
		height: 460rpx;
		background-color: #dbdbdb;
		box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1);
		bottom: env(safe-area-inset-bottom);
		box-sizing: border-box;
		padding: 32rpx 20rpx 0 20rpx;
		.more-item{
			width: 25%;
			text-align: center;
			float: left;
			// position: relative;
			// top: 10px;
			.more-item-image{
				width: 72rpx;
				height: 72rpx;
				background-color: rgba(255, 255, 255, 1);
				padding: 24rpx;
				border-radius: 24rpx;
			}
			.more-item-title{
				margin: 20rpx 0;
				font-size: 28rpx;
			}
		}
	}
	.voice-bg{
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		position: fixed;
		top: 0;
		bottom: 0;
		z-index: 1001;
		.voice-bg-len{
			height: 84rpx;
			width: 600rpx;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			background-color: rgba(255, 255, 255, 0.2);
			border-radius: 42rpx;
			text-align: center;
		}
		.voice-bg-time{
			display: inline-block;
			min-width: 120rpx;
			line-height: 84rpx;
			background-color: rgba(255, 228, 49, 1);
			border-radius: 42rpx;
		}
		.voice-bg-del{
			position: absolute;
			bottom: 180rpx;
			margin-bottom: env(safe-area-inset-bottom);
			width: 100%;
			text-align: center;
			color: #fff;
			font-size: 25rpx;
		}
	}
</style>